<template>
    <div class="view_brand">
        <card title="品牌列表">
            <template #actions>
                <el-select class="w-32" v-model="queryBy">
                    <el-option v-for="(val, key) in queryBySomething" :key="key" :value="key" :label="val" />
                </el-select>
                <el-input
                    class="w-48"
                    v-model="queryString"
                    :placeholder="placeholder"
                    prefix-icon="el-icon-search"
                    clearable
                />
            </template>
            <template #default>
                <el-table :data="tableData">
                    <el-table-column label="#" type="index" align="center" />
                    <el-table-column label="品牌名称" prop="name" />
                    <el-table-column label="品牌标识" prop="logo">
                        <template #default="{ row }">
                            <img :src="row.logo" :alt="row.logo" />
                        </template>
                    </el-table-column>
                    <el-table-column label="品牌注册号" prop="brandSn" />
                    <el-table-column label="品牌类型" prop="brandType">
                        <template v-slot="{ row: { brandType } }">
                            {{ brandTypes[brandType] }}
                        </template>
                    </el-table-column>
                    <el-table-column label="创立年代" prop="brandDate" />
                    <el-table-column label="显示状态">
                        <template v-slot="{ row: { showStatus } }">
                            <el-tag :type="brandDisplayStates[+showStatus].tagType">
                                {{ brandDisplayStates[+showStatus].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="品牌状态">
                        <template v-slot="{ row: { brandStatus } }">
                            <el-tag effect="dark" :type="brandStates[+brandStatus].tagType">
                                {{ brandStates[+brandStatus].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="添加时间" prop="createTime" />
                    <el-table-column label="操作">
                        <template v-slot="{ row }">
                            <el-button type="text" @click="view(row.brandId)">查看详情</el-button>
                            <el-button type="text" @click="edit(row)">编辑</el-button>
                            <el-button type="text" @click="disable(row.brandId)">禁用</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <template #bottom-right>
                <el-pagination
                    @current-change="query"
                    :currentPage.sync="currentPage"
                    :total="total"
                    :pageSize="pageSize"
                />
            </template>
        </card>

        <!-- 编辑对话框 -->
        <el-dialog :visible.sync="visible" title="编辑品牌">
            <template #default>
                <el-checkbox v-model="formData.showStatus"> 是否显示 </el-checkbox>
                <el-checkbox v-model="formData.brandStatus"> 品牌状态（正常/异常） </el-checkbox>
            </template>

            <template #footer>
                <el-button type="primary" @click="save">保存</el-button>
            </template>
        </el-dialog>

        <!-- 品牌详情对话框 -->
        <el-dialog :visible.sync="visible2" custom-class="details">
            <template #default>
                <div class="desc_list">
                    <div class="desc_list-top">
                        <h3 class="desc_list-title">{{ brandDetails.name }}{{ brandTypes[brandDetails.brandType] }}</h3>
                        <p class="desc_list-subtitle">商标注册号: {{ brandDetails.brandSn }}</p>
                    </div>
                    <dl class="desc_list-content">
                        <div class="desc_list-item">
                            <dt>品牌名称</dt>
                            <dd>{{ brandDetails.name }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>品牌标识</dt>
                            <dd>{{ brandDetails.logo }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>品牌介绍</dt>
                            <dd>{{ brandDetails.brandDescription }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>品牌状态</dt>
                            <dd>
                                <el-tag effect="dark" :type="brandStates[+brandDetails.brandStatus].tagType">
                                    {{ brandStates[+brandDetails.brandStatus].text }}
                                </el-tag>
                            </dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>创立时间</dt>
                            <dd>{{ brandDetails.brandDate }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>添加时间</dt>
                            <dd>{{ brandDetails.createTime }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>授权会员列表</dt>
                            <el-table :data="brandDetails.sellerInfoVoList">
                                <el-table-column type="index" label="#" align="center"></el-table-column>
                                <el-table-column prop="nickName" label="卖家名称"></el-table-column>
                                <el-table-column prop="shopName" label="店铺名称"></el-table-column>
                                <el-table-column label="操作">
                                    <template #default="{ row }">
                                        <el-button type="text" @click="_delete(row.memberId, brandDetails.brandId)">
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </dl>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { getDeletionOptions, getQueryOptions } from '../../mixins';
import { toJpeg } from '../../functions';

export default {
    data() {
        return {
            tableData: [],

            visible: false,
            visible2: false,

            formData: {
                showStatus: false,
                brandStatus: false,
            },

            brandDetails: {},
            queryBy: 'name',
        };
    },

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/pms/findPageBrand',
            paginable: true,
            params: {
                queryString: 'queryBy',
            },
            // fnAfterQuery(res) {
            //     let allImages = res.map(el => el.logo);
            //     toJpeg(allImages).then($res => {
            //         $res.forEach((covertedImage, index) => {
            //             res[index].native_url = covertedImage;
            //         });

            //         this.tableData = res;
            //     });
            //     // 返回false显式赋值结果
            //     return false;
            // },
        }),
    ],

    computed: {
        // 按某物查询
        queryBySomething() {
            return {
                name: '品牌名',
                brandSn: '商标注册号',
            };
        },

        // 占位符
        placeholder() {
            return `按${this.queryBySomething[this.queryBy]}查询`;
        },

        // >>>>> 品牌状态常量
        brandTypes() {
            return { 1: '®', 2: '™' };
        },

        brandDisplayStates() {
            return {
                0: { text: '不显示', tagType: 'info' },
                1: { text: '显示中', tagType: 'success' },
            };
        },

        brandStates() {
            return {
                0: { text: '异常', tagType: 'danger' },
                1: { text: '正常', tagType: 'success' },
            };
        },
        // 品牌状态常量 <<<<<
    },

    methods: {
        // 编辑
        edit(row) {
            this.formData.brandId = row.brandId;
            this.formData.showStatus = row.showStatus;
            this.formData.brandStatus = row.brandStatus;
            this.visible = true;
        },

        // 保存
        save() {
            this.$post('/yxl/pms/updateBrand', this.formData).then(res => {
                this.visible = false;
                this.query();
            });
        },

        // 查看详情
        view(brandId) {
            brandId = brandId || this.brandDetails.brandId;

            this.$get('/yxl/pms/findBrandDetails', { brandId }).then(res => {
                this.brandDetails = Object.freeze(res);
                this.visible2 = true;
            });
        },

        // 删除
        _delete(memberId, brandId) {
            this.$confirm('是否确定删除数据', '删除提示', {
                showClose: false,
                closeOnClickModal: false,
                type: 'error',
            })
                .then(() => {
                    this.$post('/yxl/pms/deleteBrandProviderRelation', { memberId, brandId }).then(this.view);
                })
                .catch(function () {});
        },

        // 禁用
        disable(brandId) {
            this.$confirm('是否确定禁用品牌', '禁用提示', {
                showClose: false,
                closeOnClickModal: false,
                type: 'error',
            })
                .then(() => {
                    this.$post('/yxl/pms/deleteBrand', { brandId }).then(this.query);
                })
                .catch(function () {});
        },
    },
};
</script>